import IconDouyin from '@/components/icon/IconDouyin';
import { selectMonitorhcRecord } from '@/services/api/api-monitorhc';
import { selectMonitorVideoRecord } from '@/services/api/api-monitorhc-video';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { ProCard, ProFormRadio, ProList } from '@ant-design/pro-components';
import { DrawerForm } from '@ant-design/pro-form';
import { Col, Descriptions, Row, Select, Space, Spin, Tag, Typography, message, Divider } from 'antd';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
const { Paragraph, Text } = Typography;
interface DetailMonitorVideoProps {
  record: MonitorhcData.RecordPage;
  onRefurbish: () => void;
}

const DetailMonitorVideo: React.FC<DetailMonitorVideoProps> = ({ record, onRefurbish }) => {
  const access = useAccess();
  const videoRef = useRef(null);
  const [loading, setLoading] = useState(false);

  const [details, setDetailDataState] = useState<MonitorhcData.RecordSelect>();

  const [sensitives, setSensitives] = useState([])

  const loadSelectMonitorhcRecord = async () => {
    const res = await selectMonitorhcRecord({
      id: record?.id,
    });
    if (res.code === 0) {
      setDetailDataState(res.data);
      setSensitives(res.data?.greenVideo)
    }
  };

  return (
    <DrawerForm
      key="details_details_drawer_form"
      title={record?.dataName}
      drawerProps={{
        destroyOnClose: true,
        width: 900,
      }}
      trigger={
        <a>
          {record?.dataName}
        </a>
      }
      onOpenChange={(visible) => {
        if (visible) {
          loadSelectMonitorhcRecord();
        } else {
        }
      }}
      submitter={false}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        {details !== undefined && (
          <div style={{ overflow: 'hidden' }}>
            <Row gutter={16}>
              <Col span={10}>
                <video
                  ref={videoRef}
                  hidden={loading}
                  style={{
                    width: '100%',
                    height: 500,
                  }}
                  controls
                  src={details?.dataUrl}
                />
                <Descriptions title="视频信息" column={1}>
                  <Descriptions.Item label="标题">{details?.dataName}</Descriptions.Item>
                  <Descriptions.Item label="平台">
                    {details.datahubChannelName}
                  </Descriptions.Item>
                  <Descriptions.Item label="账号">{details?.datahubSourceName}</Descriptions.Item>
                  <Descriptions.Item label="发布时间">{details?.dataReleaseTime}</Descriptions.Item>
                  <Descriptions.Item label="查看原链接">
                    <a href={details?.dataUrl} target="_blank" style={{ width: '90%' }}>
                      <Paragraph copyable ellipsis>
                        {details?.dataUrl}
                      </Paragraph>
                    </a>
                  </Descriptions.Item>
                </Descriptions>
                <Divider />
                <Descriptions title="相关负责人" column={1}>
                  {details.auditSourceResponsibles &&
                    details.auditSourceResponsibles?.map((item) => {
                      return (
                        <>
                          <Descriptions.Item label="负责人">{item.responsibleAccountName}</Descriptions.Item>
                          <Descriptions.Item label="负责人联系方式">
                            {item?.responsibleAccountPhone}
                          </Descriptions.Item>
                          <Descriptions.Item label="负责单位">
                            {item?.responsibleOrganizationName}
                          </Descriptions.Item>
                        </>
                      );
                    })}
                </Descriptions>
              </Col>
              <Col span={14} style={{
                // maxHeight: '650px', overflow: "auto", overflowX: 'hidden',
                // overflowY: 'scroll',
                marginTop: 10,
                scrollbarWidth: 'none',
              }} >
                <ProFormRadio.Group
                  name="levelId"
                  radioType="button"
                  initialValue={'all'}
                  options={[
                    { label: '全部', value: 'all' },
                    { label: '人像', value: 'p' },
                    { label: '音频', value: 'a' },
                  ]}
                  fieldProps={{
                    onChange: (e) => {
                      let value = e.target.value
                      if (value === "p") {
                        const list = details?.greenVideo && details?.greenVideo.filter((item) => item?.type === 'p')
                        setSensitives(list)
                      }
                      else if (value === "a") {
                        const list = details?.greenVideo && details?.greenVideo.filter((item) => item?.type === 'a')
                        setSensitives(list)
                      }
                      else {
                        setSensitives(details.greenVideo)
                      }
                    },
                  }}
                />
                <ProList<any>
                  ghost
                  dataSource={sensitives}
                  pagination={false}
                  itemLayout="vertical"
                  onItem={(record: any) => {
                    return {
                      onClick: () => {

                      },
                    };
                  }}
                  metas={{
                    title: {
                      render: (dom: React.ReactNode,
                        item: any,
                        index: number,
                        action,) => {
                        if (item.type == 'p') {
                          return <></>
                        } else {
                          return <div style={{ fontSize: 15 }}>音频</div>;
                        }
                      },
                    },
                    extra: {
                      render: (dom: React.ReactNode,
                        item: any,
                        index: number,
                        action) => (
                        item.pictureUrl ? <img
                          width={152}
                          height={200}
                          alt="图片"
                          src={item?.pictureUrl}
                        /> : <></>
                      ),
                    },
                    description: {
                      render: (
                        dom: React.ReactNode,
                        item: any,
                        index: number,
                        action,
                      ) => {
                        if (item.type == 'p') {
                          return <>
                            <Descriptions title={item?.name} column={1}>
                              <Descriptions.Item label="职务">{item.position}</Descriptions.Item>
                              <Descriptions.Item label="相似度">
                                {item.similarity}
                              </Descriptions.Item>
                              <Descriptions.Item label="出现时间"><Space wrap>
                                {item.appearTimes.map((item: string) => {
                                  let convertedTime = moment(item, "HH:MM:ss").format("HH:mm:ss");
                                  let time = moment(convertedTime, "HH:mm:ss");
                                  return <Tag onClick={() => {
                                    if (videoRef) {
                                      let timestamp = time.diff(moment().startOf('day'), 'seconds');

                                      videoRef.current.currentTime = timestamp;

                                      let duration = moment.duration(timestamp, 'seconds');
                                      let hours = duration.hours();
                                      let minutes = duration.minutes();
                                      let seconds = duration.seconds();

                                      message.success(
                                        `跳转到 ${moment()
                                          .set('hour', hours)
                                          .set('minute', minutes)
                                          .set('second', seconds)
                                          .format('HH:mm:ss')}`,
                                      );
                                    }
                                  }}>
                                    {moment(time).format('HH:mm:ss')}
                                  </Tag>
                                })
                                }
                              </Space></Descriptions.Item>
                            </Descriptions>
                          </>
                        } else {
                          return <Descriptions title={item?.name} column={1}>
                            <Descriptions.Item label="词汇"><Space wrap>
                              {item.keyWords.map((keyWord: string) => {
                                return <Tag >
                                  {keyWord}
                                </Tag>
                              })
                              }
                            </Space></Descriptions.Item>
                            <Descriptions.Item label="出现时间"><Space wrap>
                              {item.appearTimes.map((item: string) => {
                                let convertedTime = moment(item, "HH:MM:ss").format("HH:mm:ss");
                                let time = moment(convertedTime, "HH:mm:ss");
                                return <Tag onClick={() => {
                                  if (videoRef) {
                                    let timestamp = time.diff(moment().startOf('day'), 'seconds');

                                    videoRef.current.currentTime = timestamp;

                                    let duration = moment.duration(timestamp, 'seconds');
                                    let hours = duration.hours();
                                    let minutes = duration.minutes();
                                    let seconds = duration.seconds();

                                    message.success(
                                      `跳转到 ${moment()
                                        .set('hour', hours)
                                        .set('minute', minutes)
                                        .set('second', seconds)
                                        .format('HH:mm:ss')}`,
                                    );
                                  }
                                }}>
                                  {moment(time).format('HH:mm:ss')}
                                </Tag>
                              })
                              }
                            </Space></Descriptions.Item>
                          </Descriptions>;
                        }
                      }
                    },
                    content: {
                      render: (
                        dom: React.ReactNode,
                        item: any,
                        index: number,
                        action,
                      ) => {
                        return (
                          <Typography >
                            <Typography.Text type="secondary">
                            </Typography.Text>
                          </Typography>
                        );
                      },
                    },
                  }}
                />
              </Col>
            </Row>

          </div>
        )}
      </Spin>
    </DrawerForm>
  );
};

export default DetailMonitorVideo;
